<script>
import PageHeader from "./components/PageHeader.vue";
import PageFooter from "./components/PageFooter.vue";

export default {
  components: { PageHeader, PageFooter }
};
</script>

<template>
  <page-header></page-header>
  <nav>
    <router-link to="/">书库</router-link>
    <router-link to="/bookshelf">书架</router-link>
    <router-link to="/about">关于</router-link>
  </nav>
  <main><router-view /></main>
  <page-footer></page-footer>
</template>

<style scoped>
a {
  display: inline-block;
  width: 100px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-left: 4px solid #003388;
  border-right: 4px solid #003388;
  color: white;
}

a:hover {
  color: #d0ff00;
  background-color: #0a084e;
  border-left: 4px solid #d0ff00;
  border-right: 4px solid #d0ff00;
}
</style>
